/**
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 */

/*
 *  @include "/jTweener/src/jTweener.js"
 */
function lockButton(elem){
	$(elem).attr('disabled', 'disabled');
}

function unlockButton(elem){
	$(elem).removeAttr('disabled');
}



function fn_example1(btn){
	lockButton(btn);
	var obj = $(btn).siblings('.obj');
	obj.css({
		left: 0,
		top:0
	});

	jTweener.addTween(
		$(btn).siblings('.obj'),
		{
			left: 300,
			top: 200,
			onComplete: unlockButton,
			onCompleteParams: [btn]
		}
	);
}

function fn_example2(btn){
	lockButton(btn);
	var obj = $(btn).siblings('.obj');
	obj.css({
		left: 0,
		top:0
	});

	jTweener.addTween(
		$(btn).siblings('.obj'),
		{
			left: 300,
			top: 200,
			time: 3.5,
			transition: 'easeincubic',
			delay: 1,
			onComplete: unlockButton,
			onCompleteParams: [btn]
		}
	);
}

function fn_example3(btn){
	lockButton(btn);
	var obj = $(btn).siblings('.obj');
	obj.css({
		left: 0,
		top:0
	});

	jTweener.addTween(obj, {left: 200, time: 2});
	jTweener.addTween(obj, {top: 200, time: 2, delay: 2});
	jTweener.addTween(obj, {left: 0, time: 1, delay: 4});
	jTweener.addTween(
		obj,
		{
			top: 0,
			time: 2,
			delay: 5,
			onComplete: unlockButton,
			onCompleteParams: [btn]
		}
	);
}

function fn_example4(btn){
	lockButton(btn);
	var obj = $(btn).siblings('.obj');
	
	var radius = 100; // радиус окружности
	
	var offset_x = 200;
	var offset_y = 100;

	var circle = {
		obj: $(btn).siblings('.obj')[0],
		r: 100, //радиус окружности
		a: 0, // текущий угол
		/** угловая скорость */
		angle: function(){
			if (!arguments.length) {
				// нет аргументов — работаем как getter
				return this.a;
			} else {
				// есть аргумент — работаем как setter

				this.a = arguments[0];

				// переводим угол из градусов в радианы
				var a = this.a / 180 * Math.PI;

				// считаем новые координаты
				this.obj.style.left = (offset_x + Math.sin(a) * radius) + 'px';
				this.obj.style.top = (offset_y + Math.cos(a) * radius) + 'px';
			}
		}
	};

	jTweener.addTween(circle, {
		angle: 360,
		transition: 'easeinoutexpo',
		time: 2,
		onComplete: unlockButton,
		onCompleteParams: [btn]
	});

}

var fn_example5 = (function(){
	if ($.browser.msie) {
		return function(){};
	}
	
	// описываем прямоугольники
	var rects = [
		{x: 0, y: 0, width: 10, height: 10, color: '#c279ff'},
		{x: 0, y: 10, width: 10, height: 15, color: '#177cff'},
		{x: 0, y: 25, width: 10, height: 20, color: '#008400'},
		{x: 0, y: 45, width: 10, height: 10, color: '#fb7e00'},
		{x: 0, y: 55, width: 10, height: 15, color: '#e3e200'}
	];
	
	// запоминаем начальные позиции прямоугольников
	var initial_pos = [];
	for (var i = 0; i < rects.length; i++) {
		var r = rects[i];
		initial_pos[i] = {x: r.x, y: r.y};
	}
	
	// контекст рисования
	var canvas, ctx;
	
	
	/**
	 * Функция рисования
	 */
	function draw(){
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		for (var i = 0; i < rects.length; i++) {
			var r = rects[i];
			ctx.fillStyle = r.color;
			ctx.fillRect(r.x, r.y, r.width, r.height);
		}
	}
	
	/** Пространство имен, в котором будут работать анимации */
	var ns = 'canvas';
	
	// регистрируем функцию перерисовки в пространстве имен
	jTweener.addNSAction({onUpdate: draw}, ns);
	
	/**
	 * Вспомогательная функция, возвращающая случайное значение в диапазоне 
	 * от <code>n1</code> до <code>n2</code>
	 * @param {Number} n1
	 * @param {Number} n2
	 * @return {Number}
	 */
	function rnd(n1, n2){
		return Math.round(Math.random() * (n2 - n1) + n1);
	}
	
	/**
	 * Запуск анимации
	 */
	function play(){
		// сначала сбрасываем позиции всех прямоугольников
		for (var i = 0; i < rects.length; i++) {
			rects[i].x = initial_pos[i].x;
			rects[i].y = initial_pos[i].y;
		}
		
		// анимируем объекты
		for (var i = 0; i < rects.length; i++) {
			jTweener.addTween(rects[i], {
				x: rnd(20, canvas.width),
				y: rnd(20, canvas.height),
				namespace: ns,
				time: 3,
				transition: 'easeinoutcubic'
			});
		}
	}
	
	$(function(){
		// получааем контекст рисования
		canvas = $('#example5 canvas')[0];
		ctx = canvas.getContext('2d');
		
		// сразу же отрисуем прямоугольники
		draw();
	});
	
	// Возвращаем указатель на функцию play(). Таким образом, 
	// вызов функции fn_example4() будет запускать анимацию.
	return play;
})();

$(function(){
	$('.example').each(function(){
		var btn = $(this).find('input');
		var fn_name = 'fn_' + $(this).attr('id');
		btn.click(function(){
			if (!btn.is(':disabled') && window[fn_name]) {
				window[fn_name](btn);
			}
		});
	});
	
});
